<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画页面</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?pgxh86');
            src: url('fonts/icomoon.eot?pgxh86#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?pgxh86') format('truetype'),
                url('fonts/icomoon.woff?pgxh86') format('woff'),
                url('fonts/icomoon.svg?pgxh86#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }


        * {
            padding: 0;
            margin: 0;
        }

        /* .A {
            height: 10000px;
        } */

        ul>li {
            list-style: none;
        }

        /* 顶部开始 */
        .h {
            margin: 0 auto;
            width: 1263px;
            height: 34px;
            background-color: #f5f5f5;
        }

        ul li {
            list-style: none;
            line-height: 34px;


        }

        .c {
            float: left;
            margin-left: 40px;
        }

        .c li p {
            font-size: 12px;
            color: #999;
            font-family: "microsoft yahei", "Arial";
        }

        .b {
            float: right;
            margin: 0 30px;
        }

        a {
            text-decoration: none;
        }

        .b li {
            float: left;
            margin: 0 5px;
            font-size: 12px;
            color: #999;

        }

        .b li a {
            font-size: 12px;
            color: #999;
            font-family: "microsoft yahei", "Arial";
        }

        /* 顶部2开始 */
        .d {
            margin: 0 auto;
            width: 1263px;
            height: 80px;
            border-bottom: 1px solid #f4f4f4;
        }

        .d span {

            margin-left: 20px;
        }

        .d>span>img {
            animation-name: move1;
            animation-duration: 1s;
        }

        span.e {

            float: right;
            /* margin-right: 250px; */
            margin-top: 18px;
            /* vertical-align: bottom; */

        }

        span.e>img {
            animation-name: move2;
            animation-duration: 1s;
            width: 40px;
            height: 40px;
            margin-top: 5px;
            border: 2px solid #999;
            border-radius: 50%;
        }

        .d .f {

            float: right;
            margin-top: 20px;
            margin-right: 30px;
        }

        .d .f h5 {
            animation-name: move2;
            animation-duration: 1s;
            font-size: 14px;
            color: #333;
            font-family: "microsoft yahei", "Arial";
        }

        .d .f p {
            animation-name: move2;
            animation-duration: 1s;
            font-size: 26px;
            font-family: "microsoft yahei", "Arial";
            font-weight: bold;
            color: #67b306;
        }

        /* 固定定位 1 */
        .g {
            position: fixed;
            z-index: 100;
            right: 0px;
            margin-top: 100px;
        }


        .g>ul>li {
            width: 50px;
            height: 50px;
            font-family: 'icomoon';
            font-size: 30px;
            margin-top: 20px;
            text-align: center;
            line-height: 50px;
            border-radius: 50px;
            background-color: white;
        }


        .g>ul>li a {
            color: #999;
        }

        .g ul li:hover {
            background-color: #67b306;
        }

        .g>ul>li:hover a {
            color: white;
        }

        /* 导航栏 */
        .i {
            margin: 0 auto;
            width: 1263px;
            height: 72px;
            border-bottom: 1px solid rgb(199, 197, 197);
            /* background-color: violet; */

        }

        .i>ul {
            line-height: 72px;
            text-align: center;
        }

        .i>ul>li {
            /* background-color: wheat; */
            width: 118px;
            height: 32px;
            display: inline-block;
            text-align: center;
            font-weight: bold;
            line-height: 32px;
            margin: 0 15px;
            border-radius: 10px;
            font-family: "microsoft yahei", "Arial";

        }

        /* 二级导航栏 */
        .j {
            width: 118px;
            height: 96px;
            border-radius: 5px;
            border: 1px solid rgb(199, 197, 197);
            /* width: 118px;
            height: 32px; */
            float: left;
            font-weight: normal;
            font-family: "microsoft yahei", "Arial";
            display: none;
            background-color: #fffdfd;

        }

        /* .j>:nth-child(2) {

            border-top: 1px solid rgb(199, 197, 197);
            border-bottom: 1px solid rgb(199, 197, 197);
        } */

        .j>li>a {
            color: #000000;
        }

        .i ul li:hover .j {
            display: inline-block;

        }

        .i>ul>li:hover {
            background-color: #67b306;
        }

        .j>li:hover a {
            color: #67b306;
        }

        /* 版心部分 */
        section {
            margin: 0 auto;
        }

        .k {
            margin: 0 auto;
            width: 1263px;
            height: 394px;
            background: url(./img/版心.jpg) no-repeat;
            background-size: 100%;
            animation-name: move;
            animation-duration: 1s;
        }

        @keyframes move {

            0% {
                transform: rotateY(-180deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }

        /* 版心下的小导航栏 */
        /* 左边动画 */
        @keyframes move1 {
            0% {
                opacity: 0;
                transform: translateX(-500px);
            }

            100% {
                transform: translateX(0px);
            }
        }

        .l {
            margin: 0 auto;
            width: 1263px;
            height: 80px;
            border-bottom: 1px solid #f4f4f4;
            position: relative;
        }

        .w {
            /* display: none; */
            width: 500px;
            height: 80px;
            /* background-color: blueviolet; */
            animation-name: move1;
            animation-duration: 6s;
            /* transform: translateX(-500px); */
        }


        .m {
            margin-left: 20px;

        }

        .m>li {
            float: left;
            width: 100px;
            line-height: 80px;
            text-align: center;
            margin-left: 5px;
        }

        .m>li>a {
            color: #000;
        }

        .m>li:hover a {
            color: #67b306;
        }

        /* 右边动画 */
        @keyframes move2 {
            0% {
                opacity: 0;
                transform: translateX(500px);
            }

            100% {
                transform: translateX(0px);
            }
        }

        .n input {
            width: 250px;
            height: 35px;
            float: right;
            outline: none;
            border: none;
            margin-top: -55px;
            margin-right: 60px;
            border-radius: 10px;
            background-color: #f4f4f4;
            animation-name: move2;
            animation-duration: 6s;

        }

        .l .n span {
            animation-name: move2;
            animation-duration: 6s;
            height: 35px;
            width: 40px;
            position: absolute;
            right: 52px;
            top: 25px;
            text-align: center;
            line-height: 35px;
            font-family: 'icomoon';
            font-size: 30px;
            border-radius: 10px;
            background-color: #67b306;
            color: rgb(255, 255, 255);
        }

        /* 版心 */
        .r {

            margin: 0 auto;
            width: 1263px;
            height: 619px;
            /* background-color: yellowgreen; */
            text-align: center;


        }

        .r>h2 {
            animation-name: move3;
            animation-duration: 6s;
            width: 180px;
            height: 80px;
            margin-left: 540px;
            line-height: 80px;
            font-size: 40px;
            color: #646464;
            font-weight: 480;
            padding-top: 20px;
            /* background-color: blueviolet; */

        }

        .q {
            animation-name: move3;
            animation-duration: 6s;
            width: 50px;
            height: 10px;
            margin-left: 610px;
            margin-top: 20px;
            border-bottom: 1px solid #1ea4fe;
            /* background-color: aqua; */
        }

        /* 全部 */

        .s {
            animation-name: move3;
            animation-duration: 6s;
            margin-top: 10px;
            width: 1263px;
            height: 40px;
            /* background-color: cornflowerblue; */
        }

        .s ul {

            margin-left: 240px;
        }

        .s ul li {
            width: 180px;
            background-color: #f4f4f4;
            float: left;
            line-height: 40px;
            margin: 0 10px;
            border-radius: 15px;
        }

        .s ul li:hover {
            background-color: #67b306;
        }

        /* 中间盒子部分 */
        @keyframes move3 {
            0% {
                opacity: 0;
                transform: translateY(500px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .w {

            width: 1263px;

        }

        .w span {
            position: relative;
            /* z-index: -10; */
            margin-left: 20px;
            margin-top: 40px;
            float: left;
            width: 290px;
            height: 250px;
            background-color: #f4f4f4;
            /* background-colorgb(12, 9, 6)nge; */
        }

        .w .u img {
            width: 290px;
            height: 180px;
        }

        .w .u:hover.v {
            display: inline-block;
        }

        .w .u:hover {
            transform: translateY(-10px);
            transition: 0.5s;
            box-shadow: 6px 6px 6px #857d7d;
        }

        .w.v:hover {
            display: block;
        }

        .w span a {
            display: inline-block;
            width: 290px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
            color: #000;

        }

        .w span a:hover {
            color: #67b306;
        }

        /* 按钮 */

        .s span {

            font-family: 'icomoon';
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-top: 40px;
            background-color: #f4f4f4;
        }

        .s span a {
            color: rgb(133, 130, 130);
        }

        .s span:hover {
            background-color: #6fc006;
        }

        .s span:hover a {
            color: white;
        }

        /* 内容 */
        .x {
            margin: 0 auto;
            width: 1263px;
            height: 500px;
            /* background-color: khaki; */
            background-image: url(./img/数字沙盘.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .z>h1 {
            padding-top: 25px;
            padding-left: 50px;
            font-size: 40px;
            font-weight: 400;
        }

        .z>p {

            width: 500px;
            /* height:2000px; */
            font-size: 14px;
            padding: 20px 0px 0px 30px;
            line-height: 30px;
        }


        @keyframes move6 {
            0% {
                opacity: 0;
                width: 130px;
            }

            100% {

                width: 200px;
            }
        }

        .bb {
            width: 130px;
            height: 40px;
            margin-top: 30px;
            margin-left: 50px;
        }

        .z>.bb>button {
            width: 130px;
            height: 40px;
            background-color: #86b350;
            outline: none;
            border: none;
            border-radius: 10px;
            /* animation-name: move9;
            animation-duration: 10s; */


        }

        @keyframes move9 {
            0% {
                
                transform: translateX(-500px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .z h1,
        .z p {
            animation-name: move9;
            animation-duration: 11s;
        }

        .bb:hover button {
            animation: move6 1s both;

        }


        .z>.bb>button {
            color: white;
        }

        /* 尾部 */
        footer {
            width: 100%;
            height: 300px;
            padding-bottom: 48px;
            background: #86b350;
            border-top: 8px solid #67b306;
        }

        .tt {
            margin: 0 auto;
            height: 300px;
            width: 1263px;
            color: #fff;
            padding-bottom: 48px;
            /* background: #86b350; */
            /* border-top: 8px solid #67b306; */
        }

        .kk {
            height: 70px;
            border-bottom: 2px solid white;
        }

        .kk span {
            line-height: 70px;
            margin-left: 5px;
        }

        .kk span a {
            padding: 0px 10px;
            font-size: 14px;
            color: white;
        }

        .ff {
            width: 1263px;
            height: 229px;

            /* background-color: rgb(29, 143, 124); */
        }

        .ff>span {
            float: left;
            width: 180px;
            height: 200px;
            text-align: center;
            padding-top: 40px;
            /* background-color: wheat; */
        }

        .ff>span>ul h5 {
            font-size: 16px;
            padding-bottom: 40px;
        }

        .ff>span>ul a {
            font-size: 14px;
            font-weight: 200px;
        }

        .jj {
            float: left;
            width: 422px;
            height: 180px;
            margin-left: 20px;
            margin-top: 40px;
            /* background-color: violet; */

            border-left: 2px solid white;
            border-right: 2px solid white;
        }

        .jj p:nth-child(2) {
            font-size: 32px;
            font-weight: 700;
        }

        .jj p {
            margin-left: 90px;
        }

        .nn {
            float: left;
            width: 219px;
            height: 180px;
            margin-top: 40px;
            margin-left: 30px;
            /* background-color: tomato; */
        }

        .nn img {
            margin-left: 40px;
            width: 130px;
            height: 130px;
        }

        .nn p {
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <div class="A">
        <!-- 顶部1开始 -->
        <header>
            <div class="h">
                <ul class="a">
                    <div class="c">
                        <li>
                            <p>您好，欢迎进入某某沙盘有限公司官网！</p>
                        </li>
                    </div>

                    <div class="b">
                        <li><a href="#">关于我们</a></li>
                        <li>
                            <p>|</p>
                        </li>
                        <li><a href="#">加入收藏</a></li>
                        <li>
                            <p>|</p>
                        </li>
                        <li><a href="#">联系我们</a></li>
                    </div>
                </ul>
            </div>


            <!-- 顶部2开始 -->
            <div class="d">
                <span><img src="./img/logo.png" alt=""></span>
                <span class="f">
                    <h5>咨询电话：</h5>
                    <p> 400-888-888</p>
                </span>
                <span class="e">
                    <img src="./img/小电话.png" alt=""></li>
                </span>
            </div>
        </header>
        <!-- 固定定位 -->
        <div class="g">
            <ul>
                <li><a href="#"></a>  </li>
                <li><a href="#"></a> </li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <!-- <li><a href="#"></a></li> -->
            </ul>
        </div>

        <!-- 导航栏 -->
        <nav>
            <div class="i">
                <ul>
                    <li>网站首页</li>
                    <li>关于我们
                        <ul class="j">
                            <li><a href="#">企业文化</a></li>
                            <li><a href="#">企业风采</a></li>
                            <li><a href="#">公司资质</a> </li>
                        </ul>
                    </li>
                    <li>沙盘展示
                        <ul class="j">
                            <li><a href="#">企业文化</a></li>
                            <li><a href="#">企业风采</a></li>
                            <li><a href="#">公司资质</a> </li>
                        </ul>
                    </li>
                    <li>新闻中心
                        <ul class="j">
                            <li><a href="#">企业文化</a></li>
                            <li><a href="#">企业风采</a></li>
                            <li><a href="#">公司资质</a> </li>
                        </ul>
                    </li>
                    <li>合作案例</li>
                    <li>人才招聘</li>
                    <li>在线留言</li>
                    <li>练习我们</li>
                </ul>
            </div>
        </nav>

        <!-- 版心部分 -->
        <section>
            <div class="k"></div>
            <!-- 小导航 -->
            <div class="l">
                <div class="w">
                    <ul class="m">
                        <li><a href="#">热门搜索:</a></li>
                        <li><a href="#">地形模型</a></li>
                        <li><a href="#">商业模型</a></li>
                        <li><a href="#">别墅模型</a></li>

                    </ul>
                </div>

                <div class="n"><input type="text" placeholder="请输入关键字"><span></span></div>
            </div>
            <!-- 版心 -->
            <div class="W">

                <div class="r">

                    <h2> 沙盘展示</h2>
                    <div class="q">
                    </div>

                    <div class="s">
                        <ul>
                            <li>全部</li>
                            <li>地形模型</li>
                            <li>商业模型</li>
                            <li>别墅模型</li>
                        </ul>
                    </div>
                    <!-- 中间盒子部分 -->
                    <div class="w">
                        <span class="u"><img src="./img/图片1.jpg" alt=""><a href="#">模型一</a></span>
                        <span class="u"><img src="./img/图片2.jpg" alt=""><a href="#">模型二</a></span>
                        <span class="u"><img src="./img/图片3.jpg" alt=""><a href="#">模型三</a></span>
                        <span class="u"><img src="./img/图片4.jpg" alt=""><a href="#">模型四</a></span>
                    </div>
                    <!-- 按钮 -->
                    <div class="s">

                        <span><a href="#"></a></span>
                        <span><a href="#"></a></span>
                        <span><a href="#"></a> </span>
                    </div>
                </div>

            </div>
        </section>
        <!-- 内容 -->
        <article>
            <div class="x">
                <div class="z">
                    <h1>关于我们</h1>
                    <p>　　
                        某某沙盘设计有限公司成立于中国品牌咨询和设计行业开始崛起的上世纪90年代，至今已发展成为中国颇具规模和影响力的综合性品牌战略咨询和设计公司。不同于管理咨询公司和单纯的设计公司，某某专注于为客户创造和管理品牌，提供从品牌资产研究、市场洞察、品牌机会分析、品牌战略、品牌组合规划、命名和语词创作、设计（包括品牌识别设计、环境空间导示设计、包装设计、网络设计）到内部品牌导入、品牌管理制度建设的综合...
                    </p>
                    <div class="bb">
                        <button>了解更多</button>
                    </div>
                </div>
            </div>
        </article>

        <footer>
            <div class="tt">
                <div class="kk">
                    <span><a href="#">友情链接：</a></span>
                    <span><a href="http://www.baidu.com/">百度</a></span>
                    <span><a href="https://film.qq.com">腾讯</a></span>
                    <span><a href="https://www.taobao.com/">淘宝</a></span>
                </div>
                <div class="ff">
                    <span>
                        <ul>
                            <h5>关于我们</h5>
                            <li>企业文化</li>
                            <li>企业风采</li>
                            <li>公司资质</li>
                        </ul>
                    </span>
                    <span>
                        <ul>
                            <h5>关于我们</h5>
                            <li>企业文化</li>
                            <li>企业风采</li>
                            <li>公司资质</li>
                        </ul>
                    </span>
                    <span>
                        <ul>
                            <h5>关于我们</h5>
                            <li>企业文化</li>
                            <li>企业风采</li>
                            <li>公司资质</li>
                        </ul>

                    </span>
                    <div class="jj">
                        <p>全国咨询热线</p>
                        <p>400-888-8883</p>
                        <p>邮箱：admin@admin.comm</p>
                        <p>手机：13835156875</p>
                        <p>电话：400-888-8888</p>
                        <p>地址：江苏省南京市玄武区玄武湖</p>
                    </div>
                    <div class="nn">
                        <img src="./img/二维码.png" alt="">
                        <p>微信扫码 关注我们</p>
                    </div>
                </div>
            </div>
        </footer>


    </div>

    <script>

    </script>
</body>

</html>